<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addGeoJSONContainer,getGeoJSON,onGeoJSONParsed" />
  <title>HERE Maps API Example: Loading geoJSON MultiPolygons using AJAX: Russia</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript" 
    data-params="maps,datarendering" 
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad"
    data-libs="geojson-parser" 
    data-parent="demos/geojson-parser/">
  </script>

  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Loading geoJSON MultiPolygons using AJAX: Russia </h1>
  <p>This retrieves and parses geoJSON data holding the names and shapes
    of the provinces of Russia from a file using AJAX.
  </p>
  <p>The JSON file is located at:
    <a href="data/russia.geojson">data/russia.geojson</a>
  </p>
  <div id="mapContainer" style="width:540px; height:334px;float:left; "></div>
  <div id="sidebar" style="float:left; color: rgb(102, 102, 102);"></div>
  <div id="src" style="clear:both;width:100%">
    <br/>
      <p>The control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class="prettyprint">&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/geojson-parser.js">libs/geojson-parser.js</a>"&gt;&lt;/script></code></pre>
  </div>
<script id="example-code" data-categories="geojson" type="text/javascript" >
//<![CDATA[
var map,
  infoBubbles,
  geoJsonContainer,
  jsonManager;

function onGeoJSONParsed() {
  if (jsonManager.state === 'finished') {
    var err = geoJsonContainer.addGeoJSON(jsonManager.object);
    if (geoJsonContainer.state === 'finished') {
      map.zoomTo(geoJsonContainer.getBoundingBox());
    } else {
      alert(err);
    }
  }
}

function getGeoJSON() {
  var filename = 'data/russia.geojson';
  jsonManager = new JSONManager();
  jsonManager.parseJSON(filename);
  jsonManager.addObserver('state', onGeoJSONParsed);
}

function addGeoJSONContainer(map) {
  geoJsonContainer = new GeoJSONContainer();
  map.objects.add(geoJsonContainer);
  var TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click';
  geoJsonContainer.addListener(CLICK, function (evt) {
    // The FO property holds the province name.
    infoBubbles.openBubble(evt.target.properties.FO,
       evt.target.getBoundingBox().getCenter());
  }, false);
}

function afterHereMapLoad(theMap) {
  map = theMap;
  infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.components.add(infoBubbles);
  addGeoJSONContainer(map);
  getGeoJSON();
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
